<template>
	<div class="content">
		<!-- <van-nav-bar
			fixed
			z-index="2"
			placeholder
			left-arrow
			left-text="返回"
			right-text="工资条历史"
			:border="false"
			:title="payroll.salaryTitle"
			@click-left="onClickLeft"
			@click-right="onClickRight"
		></van-nav-bar> -->
		<van-nav-bar
			fixed
			z-index="2"
			placeholder
			:border="false"
			:title="payroll.salaryTitle"
		></van-nav-bar>

		<div class="bg">
			<div class="actual-salary text-white text-center">
				<p class="pay-history text-placeholder px16" @click="handleNavigationClick">
					{{ payroll.salaryTitle }}
					<van-icon name="arrow" class="vertical-middle" />
				</p>
				<p class="pay-text px32">
					{{ payroll.actualSalary || '未收到工资条' }}
				</p>
			</div>
		</div>

		<div class="wage-content text-white flex-center flex-items-center">
			<p class="text-placeholder px14">
				{{ payroll.thanksStart }}{{ payroll.name }}， {{ payroll.thanksEnd }}
			</p>
		</div>

		<section class="pay-slip-content">
			<ul>
				<li class="flex-between px16" v-for="item in payrollOptionsData" :key="item.title">
					<p>{{ item.title }}</p>
					<p class="text-secondary">{{ item.value || '' }}</p>
				</li>
			</ul>
		</section>

		<footer class="pay-slip-footer van-hairline--top">
			<p class="tip px10">{{ payroll.warmTips }}</p>
			<div class="flex-around">
				<van-button
					plain
					hairline
					size="large"
					square
					color="#4a6573"
					:class="{ 'is-feedback': false }"
				>
					<span class="px12">确认以上信息</span>
					<br />
					<span v-if="content.confirmDays * 1 > 0" class="px10">
						{{ content.confirmDays }}天后自动确认
					</span>
					<span v-else-if="content.confirmDays * 1 === 0" class="px10">即将自动确认</span>
				</van-button>
				<van-button v-if="false" class="feedback" size="large" square color="#4a6573">
					去反馈
				</van-button>
			</div>
		</footer>

		<van-action-sheet
			v-model="show"
			:actions="actions"
			cancel-text="取消"
			close-on-click-action
			@select="onSelect"
		/>
	</div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

import { postPayrollRecords } from '@/APIs/index'

export default {
	name: 'PaySlipContent',
	data() {
		return {
			id: this.$route.query.id ?? null,
			show: false,
			actions: []
		}
	},
	computed: {
		...mapState(['content', 'info']),
		payroll() {
			const { payroll = {}, payrollData = [] } = this.content
			const { value: name } = payrollData.find(({ title }) => ['姓名'].includes(title)) || {}
			const { value: actualSalary } =
				payrollData.find(({ title }) => ['实发工资'].includes(title)) || {}
			return { ...payroll, name, actualSalary }
		},
		payrollOptionsData() {
			const { payroll = {}, payrollData = [] } = this.content
			const { hideEmpty, hideZero } = payroll
			return payrollData
				.filter(({ title }) => !['姓名', '实发工资'].includes(title))
				.filter(({ value }) => !(value + '' === 'null' && +hideEmpty === 0))
				.filter(({ value }) => !(+value === 0 && +hideZero === 0))
		}
	},
	created() {
		// this.$store.commit('HANDLE_LOGIN', require('./data')?.data?.data)
	},
	methods: {
		...mapActions(['handleSelectContent']),
		onClickLeft() {
			this.$router.push({ name: 'Password' })
		},
		onClickRight() {
			this.$router.push({ name: 'PaySlipHistory' })
		},
		async handleNavigationClick() {
			const { code, state } = this.info
			const { data } = await postPayrollRecords({ code, state })
			this.actions = data.map(({ salaryTitle: name, ...item }) => ({ ...item, name }))
			// this.actions = [{ spmId: 100, name: '07薪资' }]
			this.show = true
		},
		async onSelect(item) {
			const { code, state, userAccount } = this.info
			const { spmId } = item
			await this.handleSelectContent({ code, state, spmId, userAccount })
		}
	}
}
</script>

<style lang="less" scoped>
@import '@/style/global.less';
.content {
	position: relative;
	.bg {
		width: 100%;
		height: 160px;
		position: relative;
		background-color: rgba(74, 101, 115, 0.8);
		overflow: hidden;
		&:before,
		&:after {
			content: '';
			position: absolute;
			left: 50%;
			min-width: 400vw;
			min-height: 400vw;
			background-color: @main-color;
			animation-name: rotate;
			animation-iteration-count: infinite;
			animation-timing-function: linear;
		}
		&:before {
			bottom: 24px;
			border-radius: 45%;
			animation-duration: 10s;
		}
		&:after {
			bottom: 8px;
			opacity: 0.3;
			border-radius: 47%;
			animation-duration: 10s;
		}
		@keyframes rotate {
			0% {
				transform: translate(-50%, 0) rotateZ(0deg);
			}
			50% {
				transform: translate(-50%, -2%) rotateZ(180deg);
			}
			100% {
				transform: translate(-50%, 0%) rotateZ(360deg);
			}
		}
		.actual-salary {
			width: 100%;
			height: 100%;
			padding: 30px 0;
			position: absolute;
			z-index: 1;
			.pay-history {
				line-height: 30px;
			}
			.pay-text {
				line-height: 100px;
			}
		}
	}
	.wage-content {
		line-height: 40px;
		background-color: rgba(74, 101, 115, 0.8);
		border-bottom: 10px solid #eaebec;
	}

	.pay-slip-content {
		ul {
			padding: 0 40px;
			li {
				margin: 25px auto;
			}
		}
	}

	.pay-slip-footer {
		box-sizing: border-box;
		background: #fff;
		width: 100vw;
		height: 100px;
		position: fixed;
		bottom: 0;
		padding: 8px 20px;
		.tip {
			line-height: 20px;
		}
		.van-button {
			width: 100%;
			border-radius: 8px;
			&.is-feedback {
				width: 60%;
			}
			&.feedback {
				width: 35%;
			}
		}
	}
}
</style>
